/*
* @Author: wangliang
* @Date: 2018/4/11
* @description: 基金信息
*/
<template>
    <div>
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>基金基本信息
                <span class="m-l-20 m-r-20">最后更新时间：{{comFund.modifyTime | cmsMoment}}</span>
                <el-button type="primary" size="mini" @click="saveFundInfo(true)" round class="m-l-20">保存</el-button>
            </h3>
        </el-row>
        <el-form class="custom-box p-20 m-b-20" :model="comFund" :rules="rules" ref='basicForm'>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="基金别称" label-width="120px">
                        <el-input v-model="comFund.fundName" :maxlength="50"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="13">
                            <el-form-item label="基金类型" label-width="120px" prop="fundType">
                                <el-select v-model="comFund.fundType" placeholder="请选择" @change="typeChange">
                                   <el-option v-for="item in fundType"
                                    :key="item.id"
                                    :label="item.dictName"
                                    :value="item.dictValue-0"
                                   ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="资本来源" label-width="90px" prop="fundSource">
                                <el-select v-model="comFund.fundSource" placeholder="请选择" @change="sourceChange">
                                    <el-option v-for="item in capitalFromType"
                                    :label="item.dictName"
                                    :key="item.id"
                                    :value="item.dictValue-0">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="基金存续年限" label-width="120px">
                        <el-row>
                            <el-col :span="7">
                                <el-select v-model="comFund.invest" placeholder="请选择">
                                    <el-option v-for="item in option1"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span='1' class="m-l-3 m-r-3">
                                <i class="el-icon-plus addBtn"></i>
                            </el-col>
                            <el-col :span="7">
                                <el-select v-model="comFund.quit" placeholder="请选择">
                                     <el-option v-for="item in option2"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span='1' class="m-l-3 m-r-3">
                                <i class="el-icon-plus addBtn"></i>
                            </el-col>
                            <el-col :span="7">
                                <el-select v-model="comFund.extend" placeholder="请选择">
                                    <el-option v-for="item in option3"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-row>
                        <el-col :span="13">
                            <el-form-item label="募集状态" label-width="120px" prop="raiseState">
                                <el-select v-model="comFund.raiseState" placeholder="请选择" @change="statusChange">
                                    <el-option v-for="item in raiseStatus"
                                        :key="item.id"
                                        :label="item.dictName"
                                        :value="item.dictValue-0"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="投资币种" label-width="90px" prop="currencyType">
                                <el-select v-model="comFund.currencyType" placeholder="请选择" @change="currencyChange">
                                    <el-option v-for="item in currencyType"
                                    :label="item.dictName"
                                    :key="item.id"
                                    :value="item.dictValue-0">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="是否在基金业协会备案" label-width="180px" prop="fundAssociation">
                                <el-select v-model="comFund.fundAssociation" placeholder="请选择" @change="associationChange">
                                     <el-option v-for="(item, index) in whether"
                                    :label="item.dictName"
                                    :key="index"
                                    :value="item.dictValue-0">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="策略描述" label-width="120px">
                        <el-input type="textarea" 
                           v-model="comFund.strategy"
                            :rows="4" resize="none" :maxlength="2000"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <IndustryTag :industryList="industryList" ref="industryList" @setCvIndustryChange="setCvIndustryChange" @industryPass='industryPass'/>
                    <Tag :comTagDtoList="comTagDtoList" :cvIndustryValue="cvIndustryValue" @tagPass='tagPass' ref="tag" />
                </el-col>
            </el-row>    
        </el-form>
        <div class="m-t-20" v-if="showOther">
            <manageTeam :type="3" :itemId="fundId" :itemType="3"></manageTeam>
        </div>
        <div v-if="showOther">
            <manageCompany :fundId="fundId"></manageCompany> 
            <fundLp :fundId="fundId"></fundLp>  
            <collectInfo :fundId="fundId"></collectInfo>
            <manageCost :fundId="fundId" class="m-b-20"></manageCost>
        </div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import manageCompany from './manage-company.vue'; // 管理公司
import fundLp from './fund-lp.vue'; // 基金lp
import collectInfo from './collect-information.vue'; // 募集信息
import manageCost from './manage-cost.vue'; // 管理费用
import manageTeam from '../../../../../components/management-team/index.vue';
import ComFundService from '../../../../../service/subject/company/fund-info/index';
import { ComFundDto, ComIndustryDto, ComTagDto } from '../../../../../api/Interface';
import IndustryTag from '../../../../../components/industry-tag/index.vue';
import Tag from '../../../../../components/cms-tag/index.vue';
@Component({
    components: { 
       manageCompany,
       fundLp,
       collectInfo,
       manageCost,
       manageTeam, // 高管团队
       IndustryTag, // 行业标签
       Tag, // 标签
    }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    public companyId: string;
    public fundType: object[] = this.$store.state.user.dictionary.dicList.fundType; // 基金类型
    public capitalFromType: object[] = this.$store.state.user.dictionary.dicList.capitalFromType; // 资本来源
    public raiseStatus: object[] = this.$store.state.user.dictionary.dicList.raiseStatus; // 募集状态
    public currencyType: object[] = this.$store.state.user.dictionary.dicList.currencyType; // 货币类型
    public whether: object[] = this.$store.state.user.dictionary.dicList.whether; // 是否
    public tabIndex: number = 0;
    public valueTime: string = '';
    public inputValue: string = '';
    public checkList: string[] = [];
    public comFund: ComFundDto = {} as ComFundDto;
    public industryList: ComIndustryDto[] = []; // 行业信息
    public cvIndustryValue: string[] = [];
    // 标签 列表
    public comTagDtoList: ComTagDto[] = [];
    public fundId: number = 0;
    public showOther: boolean = false;
    public option1: object[] = [{id: -1, name: '投资期'}, {id: 0, name: '0'}, {id: 1, name: '1'}, {id: 2, name: '2'}, {id: 3, name: '3'}, {id: 4, name: '4'}, {id: 5, name: '5'}, {id: 6, name: '6'}, {id: 7, name: '7'}, {id: 8, name: '8'}, {id: 9, name: '9'}];
    public option2: object[] = [{id: -1, name: '退出期'}, {id: 0, name: '0'}, {id: 1, name: '1'}, {id: 2, name: '2'}, {id: 3, name: '3'}, {id: 4, name: '4'}, {id: 5, name: '5'}, {id: 6, name: '6'}, {id: 7, name: '7'}, {id: 8, name: '8'}, {id: 9, name: '9'}];
    public option3: object[] = [{id: -1, name: '延长期'}, {id: 0, name: '0'}, {id: 1, name: '1'}, {id: 2, name: '2'}, {id: 3, name: '3'}, {id: 4, name: '4'}, {id: 5, name: '5'}, {id: 6, name: '6'}, {id: 7, name: '7'}, {id: 8, name: '8'}, {id: 9, name: '9'}];
    public rules = {
        fundType: [ // 基金类型
            { required: true, message: '请选择基金类型', trigger: 'change' },
        ],
        fundSource: [ // 资本来源
            { required: true, message: '请选择资本来源', trigger: 'change'},
        ],
        raiseState: [ // 募集状态
            { required: true, message: '请选择募集状态', trigger: 'change'},
        ],
        currencyType: [ // 投资币种
            { required: true, message: '请选择投资币种', trigger: 'change'},
        ],
        fundAssociation: [ // 是否在基金业协会备案
            { required: true, message: '请选择是否在基金业协会备案', trigger: 'change'},
        ]
    };
    public disabledList: boolean[] = [];
    // refs
    public $refs: {
        basicForm: HTMLFormElement,
        industryList: any,
        tag: any
    };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }

    // 声明周期钩子
    public mounted() {
        if (this.fundId || this.fundId !== 0) {
            this.showOther = true;
        }
    }
    public created() {
        this.companyId = this.$route.params.itemId;
        // this.getFund();
    }

    // 方法
    // cv行业设置
    public setCvIndustryChange(valList: string[]) {
        this.cvIndustryValue = valList;
    }
    // 保存基金信息
    public async saveFundInfo(showBool: boolean) {
        this.$refs.basicForm.validate(async (valid: boolean) => {
            if (valid) {
                // 验证投资行业是否 有值
                const industryListValid = await this.$refs.industryList.checkInput();
                if (!industryListValid) {
                    return;
                }
                // 验证投资标签是否 有值
                const tagValid = await this.$refs.tag.checkInput();
                if (!tagValid) {
                    return;
                }
                const tagList = await this.$refs.tag.getTagList();
                this.comFund.companyId = Number(this.companyId);
                this.comFund.industryList = this.industryList;
                this.comFund.tagList = tagList;
                if (!this.comFund.id) { //添加
                    const { resCode } = await ComFundService.saveFundInfo(this.comFund);
                    if (resCode === '0') {
                        if (showBool) {
                            this.$message.success('添加成功');
                        }
                        // this.getFund();
                    }
                } else { // 修改
                    const { resCode } = await ComFundService.updateFundInfo(this.comFund);
                    if (resCode === '0') {
                        if (showBool) {
                            this.$message.success('修改成功');
                        }
                    }
                }
            }
            });
    }
    // 获取基金信息
    public async getFund() {
        const res = await ComFundService.getFundInfo(Number(this.companyId));
        this.comFund = res.data;
        this.fundId = res.data.id;
        if (this.fundId) {
            this.showOther = true;
        }
        // 获取标签列表
        this.comTagDtoList = res.data.tagList;
        this.industryList = res.data.industryList;
        if (!res.data.fundType || !res.data.fundSource || !res.data.raiseState || !res.data.currencyType || !res.data.fundAssociation || res.data.industryList.length <= 0 || res.data.tagList <= 0) {
            this.$emit('fundTest', false);
        } else {
            this.$emit('fundTest', true);
        }
        res.data.fundType ? this.disabledList[0] = true : this.disabledList[0] = false; // 基金类型
        res.data.fundSource ? this.disabledList[1] = true : this.disabledList[1] = false; // 资本来源
        res.data.raiseState ? this.disabledList[2] = true : this.disabledList[2] = false; // 募集状态
        res.data.currencyType ? this.disabledList[3] = true : this.disabledList[3] = false; // 投资币种
        res.data.fundAssociation ? this.disabledList[4] = true : this.disabledList[4] = false; // 是否备案
        res.data.industryList.length === 0 ? this.disabledList[5] = false : this.disabledList[5] = true; // 行业
        res.data.tagList.length === 0 ? this.disabledList[6] = false : this.disabledList[6] = true; // 标签
        this.testNotice();
        if (!this.disabledList[5]) {
            // 验证投资行业是否 有值
            const industryListValid = await this.$refs.industryList.checkInput();
            if (!industryListValid) {
                return;
            }
        }
        if (!this.disabledList[6]) {
            // 验证投资标签是否 有值
            const tagValid = await this.$refs.tag.checkInput();
            if (!tagValid) {
                return;
            }
        }
    }
    // tab控制
    public typeChange() {
        if (this.comFund.fundType) {
            this.disabledList[0] = true;
        } else {
            this.disabledList[0] = false;
        }
        this.testNotice();
    }
    public sourceChange() {
        if (this.comFund.fundSource) {
            this.disabledList[1] = true;
        } else {
            this.disabledList[1] = false;
        }
        this.testNotice();
    }
    public statusChange() {
        if (this.comFund.raiseState) {
            this.disabledList[2] = true;
        } else {
            this.disabledList[2] = false;
        }
        this.testNotice();
    }
    public currencyChange() {
        if (this.comFund.currencyType) {
            this.disabledList[3] = true;
        } else {
            this.disabledList[3] = false;
        }
        this.testNotice();
    }
    public associationChange() {
        if (this.comFund.fundAssociation) {
            this.disabledList[4] = true;
        } else {
            this.disabledList[4] = false;
        }
        this.testNotice();
    }
    // 标签验证
    public tagPass(bool: boolean) {
        this.disabledList[6] = bool;
        this.testNotice();
    }
    // 行业验证
    public industryPass(bool: boolean) {
        this.disabledList[5] = bool;
        this.testNotice();
    }
    // 验证通知
    public testNotice() {
        if (this.disabledList.indexOf(false) >= 0) {
            this.$emit('fundTest', false);
        } else {
            this.$emit('fundTest', true);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .addBtn {
        font-size: 14px;
        margin-top: 12px;
    }
    .m-l-3 {
        margin-left: 3px;
    }
    .m-r-3 {
        margin-right: 3px;
    }
</style>